<template>
  <div class="cart-item" v-if="Object.keys(cartItemInfo).length">
    <check-box-button :is-checked="cartItemInfo.checked" @changCheck="changCheck"/>
    <div class="info-img">
      <img :src="cartItemInfo.img" alt="" @load="cartImgLoad">
    </div>
    <div class="info-content">
      <p class="info-content-title">{{ cartItemInfo.title }}</p>
      <p class="standard-style info-content-desc">{{ cartItemInfo.styleName + "；" + cartItemInfo.size }}</p>
      <div class="info-content-bottom">
        <p>￥{{ cartItemInfo.price }}</p>
        <plus-and-minus-buttons :count="cartItemInfo.purchaseCount"
                                :minus-disabled="cartItemInfo.purchaseCount <= 1"
                                :plus-disabled="false"
                                @decremental="decremental"
                                @incremental="incremental"/>
      </div>
    </div>
  </div>
</template>

<script>
import PlusAndMinusButtons from "@/components/component/plusAndMinusButtons/PlusAndMinusButtons";
import CheckBoxButton from "./CheckBoxButton"

export default {
  name: "CartItem",
  components: {
    PlusAndMinusButtons,
    CheckBoxButton
  },
  props: {
    cartItemInfo: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  methods: {
    cartImgLoad() {
      this.$bus.$emit("cartImgLoad");
    },
    decremental() {
      this.$store.dispatch("changeGoodsCount", {item: this.cartItemInfo, purchaseCount: -1});
    },
    incremental() {
      this.$store.dispatch("changeGoodsCount", {item: this.cartItemInfo, purchaseCount: 1});
    },
    changCheck() {
      this.$store.dispatch("changeGoodsCheck", this.cartItemInfo);
    }
  }
}
</script>

<style scoped>
.cart-item {
  padding: 15px 5px;
  display: flex;
  border-bottom: 1px solid #e6e7e8;
}

.cart-item .info-img {
  min-height: 100px;
  display: flex;
  align-items: center;
}

.cart-item .info-img img {
  width: 80px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

.cart-item .info-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 15px;
  padding-right: 5px;
}

.cart-item .info-content p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item .info-content .info-content-title {
  font-size: 16px;
  color: #000;
}

.cart-item .info-content .info-content-desc {
  display: inline-block;
  margin: inherit;

}

.cart-item .info-content .info-content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item .info-content .info-content-bottom p {
  color: #f13e3a;
}

</style>